<template>
  <el-row :gutter="20">
    <el-col v-for="(item, index) in props.modelValue" :key="index" :lg="4" :md="6" :sm="12" :xs="24">
      <el-card
          :class="`status-${item.value}`"
          body-style="padding: 10px"
          class="statistics-card"
          shadow="hover"
          @click="handleClick(item)"
      >
        <div class="card-content">
          <div class="icon-container">
            <el-icon :class="`icon-status-${item.value}`" :size="32">
              <component :is="getIconByLabel(item.label)"></component>
            </el-icon>
          </div>
          <div class="statistics-info">
            <div class="statistics-count">{{ item.count }}</div>
            <div class="statistics-label">{{ item.label }}</div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import {Box, CircleCheck, CircleClose, DataAnalysis, ShoppingCart, Upload} from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: Array,
  }
})
const emit = defineEmits(['click'])
const handleClick = (item) => {
  emit('click', item)
}

const getIconByLabel = (label) => {
  const iconMap = {
    '全部': DataAnalysis,
    '已取消': CircleClose,
    '已下单': ShoppingCart,
    '已交付': Box,
    '已上报': Upload,
    '完成': CircleCheck
  }
  return iconMap[label] || CircleClose
}
</script>

<style scoped>
.statistics-card {
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 8px;
  border-top: 3px solid transparent;
}

.statistics-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
  background-color: rgba(var(--el-color-primary-rgb), 0.1);
}

.statistics-info {
  flex: 1;
}

.statistics-count {
  font-size: 24px;
  font-weight: bold;
  color: var(--el-text-color-primary);
  line-height: 1.2;
}

.statistics-label {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-top: 5px;
}

/* 全部统计卡片样式 */
.status-0 {
  border-top-color: #8957e5;
}

.status-0 .icon-container {
  background-color: rgba(137, 87, 229, 0.1);
}

.icon-status-0 {
  color: #8957e5;
}

.status-5 {
  border-top-color: var(--el-color-danger);
}

.status-5 .icon-container {
  background-color: rgba(var(--el-color-danger-rgb), 0.1);
}

.icon-status-5 {
  color: var(--el-color-danger);
}

.status-1 {
  border-top-color: var(--el-color-warning);
}

.status-1 .icon-container {
  background-color: rgba(var(--el-color-warning-rgb), 0.1);
}

.icon-status-1 {
  color: var(--el-color-warning);
}

.status-2 {
  border-top-color: var(--el-color-info);
}

.status-2 .icon-container {
  background-color: rgba(var(--el-color-info-rgb), 0.1);
}

.icon-status-2 {
  color: var(--el-color-info);
}

.status-3 {
  border-top-color: var(--el-color-primary);
}

.status-3 .icon-container {
  background-color: rgba(var(--el-color-primary-rgb), 0.1);
}

.icon-status-3 {
  color: var(--el-color-primary);
}

.status-4 {
  border-top-color: var(--el-color-success);
}

.status-4 .icon-container {
  background-color: rgba(var(--el-color-success-rgb), 0.1);
}

.icon-status-4 {
  color: var(--el-color-success);
}
</style>